<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<link rel="stylesheet" href="element-plus/index.css" />
		<script src="element-plus/index.full.js"></script>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		nav {
			height: 50px;
			background-color: #00c;
			color: #fff;
			font-size: 16px;
			line-height: 50px;
			padding: 0 20px;
		}
		.content {
			width: calc(100% - 200px);
			height: calc(100vh - 50px);
			border: 1px solid #f00;
			position: absolute;
			top: 50px;
			right: 0;
			padding: 20px;
		}
	</style>
	<body>
		<div id="app">
			<nav>
				<span>后台管理系统</span>
				<span style="float: right;">admin</span>
			</nav>
			<!-- 左侧菜单 -->
			<el-menu style="width: 200px;height: calc(100vh - 50px);" default-active="1" background-color="#00a"
				text-color="#fff" active-text-color="#ff0">
				<el-menu-item index="1">
					<span>用户管理</span>
				</el-menu-item>
				<el-menu-item index="2">
					<span>系统设置</span>
				</el-menu-item>
				<el-menu-item index="3">
					<span>日志管理</span>
				</el-menu-item>
			</el-menu>

			<div class="content">
				<el-card>
					<template #header>
						<span>用户管理</span>
						<el-button type="primary" style="float: right;" @click="openAddDialog">添加用户</el-button>
					</template>
					<!-- 搜索 -->
					<el-input v-model="searchKeyword" style="width: 300px;" @keyup.enter="search">
						<template #append>
							<el-button @click="search">搜索</el-button>
						</template>
					</el-input>
					<!-- 表格 -->
					<el-table :data="displayData" style="margin: 20px 0;" border>
						<el-table-column prop="id" label="id"></el-table-column>
						<el-table-column prop="name" label="姓名"></el-table-column>
						<el-table-column prop="email" label="邮箱"></el-table-column>
						<el-table-column prop="phone" label="电话"></el-table-column>
						<el-table-column prop="role" label="角色"></el-table-column>
						<el-table-column prop="status" label="状态">
							<template #default="scope">
								<el-tag v-if="scope.row.status === '启用'" type="success">{{scope.row.status}}</el-tag>
								<el-tag v-else type="danger">{{scope.row.status}}</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template #default="scope">
								<el-button @click="show = true,form={...scope.row},current=scope.$index" size="small"
									type="primary">编辑</el-button>
								<el-button @click="del(scope.$index)" type="danger" size="small">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页 -->
					<el-pagination :total="displayData.length" layout="total, prev, pager, next, jumper">
					</el-pagination>
				</el-card>
				<!-- 弹窗 -->
				<el-dialog v-model="show" :title="form.id ? '编辑用户' : '添加用户'" style="width: 500px;">
					<el-form ref="userForm" :rules="rules" :model="form">
						<el-form-item label="姓名" prop="name">
							<el-input v-model="form.name"></el-input>
						</el-form-item>
						<el-form-item label="邮箱" prop="email">
							<el-input v-model="form.email"></el-input>
						</el-form-item>
						<el-form-item label="电话" prop="phone">
							<el-input v-model="form.phone"></el-input>
						</el-form-item>
						<el-form-item label="角色" prop="role">
							<el-select v-model="form.role">
								<el-option label="管理员" value="管理员"></el-option>
								<el-option label="编辑" value="编辑"></el-option>
								<el-option label="查看者" value="查看者"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="状态" prop="status">
							<el-select v-model="form.status">
								<el-option label="启用" value="启用"></el-option>
								<el-option label="禁用" value="禁用"></el-option>
							</el-select>
						</el-form-item>
					</el-form>
					<template #footer>
						<el-button @click="show = false">取消</el-button>
						<el-button @click="post" type="primary">确定</el-button>
					</template>
				</el-dialog>
			</div>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						show: false,
						form: {},
						current: 0,
						searchKeyword: '',
						displayData: [],
						rules: {
							name: [{
								required: true,
								message: '请输入姓名',
								trigger: 'blur'
							}],
							email: [{
								required: true,
								message: '请输入邮箱',
								trigger: 'blur'
							}],
							phone: [{
								required: true,
								message: '请输入电话',
								trigger: 'blur'
							}],
							role: [{
								required: true,
								message: '请选择角色',
								trigger: 'change'
							}],
							status: [{
								required: true,
								message: '请选择状态',
								trigger: 'change'
							}]
						},
						tableDate: [{
								id: 1,
								name: '张三',
								email: "zhangsan@163.com",
								phone: "13800138001",
								role: "管理员",
								status: "启用",
							},
							{
								id: 2,
								name: '李四',
								email: "lisi@163.com",
								phone: "13800138002",
								role: "编辑",
								status: "启用",
							},
							{
								id: 3,
								name: '王五',
								email: "wangwu@163.com",
								phone: "13800138003",
								role: "查看者",
								status: "禁用",
							}
						]
					}
				},
				created() {
					this.displayData = [...this.tableDate];
				},
				methods: {
					openAddDialog() {
						this.show = true;
						this.form = {
							status: '启用' // 默认状态
						};
						this.current = -1;
					},
					del(i) {
						this.$confirm("确认删除该用户?", "提示", {
							type: "warning",
							confirmButtonText: "确定",
							cancelButtonText: "取消"
						}).then(() => {
							this.tableDate.splice(i, 1)
							this.search()
						})
					},
					post() {
						this.$refs.userForm.validate(res => {
							if (res) {
								if (this.form.id) {
									this.tableDate[this.current] = this.form
								} else {
									const newId = this.tableDate.length ?
										Math.max(...this.tableDate.map(item => item.id)) + 1 : 1;
									this.tableDate.push({
										id: newId,
										...this.form
									})
								}
								this.$message.success("操作成功")
								this.form = {}
								this.current = -1
								this.show = false
								this.search()
							}
						})
					},
					search() {
						if (!this.searchKeyword) {
							this.displayData = [...this.tableDate];
							return;
						}
						const keyword = this.searchKeyword.toLowerCase();
						this.displayData = this.tableDate.filter(item =>
							Object.values(item).some(value =>
								String(value).toLowerCase().includes(keyword)
							)
						);
					}
				}
			}).use(ElementPlus).mount('#app')
		</script>
	</body>
</html>